<template>
  <div class="base-container">
    <div style="margin-bottom: 10px;">
      <span
        @click="$router.go(-1)"
        style="cursor: pointer;font-size: 14px;color: #627CBE"
      >
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </span>
      <span style="margin-left: 25px;font-size: 18px;">{{ title }}</span>
    </div>
    <div class="form" style="padding-top: 10px">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="18">
            <el-row>
              <el-col :span="18">
                <el-form-item label="应用名称：" prop="name">
                  <el-input
                    v-model="formData.name"
                    placeholder="请输入应用名称："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="18">
            <el-row>
              <el-col :span="14">
                <el-form-item label="应用服务" prop="actionList">
                  <el-transfer
                    v-model="formData.actionList"
                    :props="transferProp"
                    :data="apiGroup"
                    :titles="['接口选项', '确认列表']"
                  >
                  </el-transfer>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="18">
            <el-row>
              <el-col :span="14">
                <el-form-item label="IP白名单：" prop="ipWhiteList">
                  <el-input
                    v-model="formData.ipWhiteList"
                    type="textarea"
                    placeholder="请输入白名单以逗号分隔192.168.0.1,192.168.0.107"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="18">
            <el-row>
              <el-col :span="14">
                <el-form-item label="备注：" prop="remark">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    placeholder="请输入多行备注"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import { sendJSON } from "@/utils/request";
export default {
  components: {},
  data() {
    return {
      formData: {
        name: "",
        actionList: [],
        ipWhiteList: "*",
        remark: ""
      },
      apiGroup: [],
      transferProp: {
        key: "uid",
        label: "actionKey"
      },
      title: null,
      isAdd: null,
      rules: {
        name: [
          {
            required: true,
            message: "请输入应用名称：",
            trigger: "blur"
          }
        ],
        actionList: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个应用服务",
            trigger: "change"
          }
        ],
        ipWhiteList: [
          {
            required: true,
            type: "string",
            message: "请至少填写一个IP白名单：",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    try {
      let { info, isAdd } = this.$route.params,
        { appInfo, actionList } = info;
      this.isAdd = isAdd;
      this.title = this.isAdd ? "添加" : "编辑";
      this.formData = appInfo;
      this.apiGroup = actionList;
    } catch (err) {
      // 非法进入则退
      console.log(err);
      this.$router.go(-1);
    }
  },
  methods: {
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        let url = null;
        if (this.isAdd) {
          url = "/sys/app/add";
        } else {
          url = "/sys/app/upd";
        }
        sendJSON(url, this.formData).then(res => {
          this.$message(res.msg);
          res.success && this.$router.go(-1);
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/base/index.scss";
.base-container {
  background: #f6f7fb;
  height: calc(100% - 50px);
  .form {
    background: #ffffff;
  }
}
</style>
